<template>
  <div class="permissMana-container">
    <div class="permissMana-header">
      <el-input size="small" placeholder="请输入角色英文名" v-model="role.name">
        <template slot="prepend">ROLE_</template>
      </el-input>
      <el-input v-model="role.nameZh" placeholder="请输入角色中文名" size="small" @keydown.enter.native="doAddRole"></el-input>
      <el-button type="primary" size="small" icon="el-icon-plus" @click="doAddRole">添加角色</el-button>
    </div>
    <div class="permissMana-body">
      <el-collapse v-model="activeName" accordion @change="collapseChange">
        <el-collapse-item v-for="(item, index) in roles" :key="index" :title="item.nameZh" :name="item.id">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>可访问资源</span>
              <el-button style="float: right; padding: 3px 0; color: #ff0000" icon="el-icon-delete" @click="deleteRole(item)">删除角色</el-button>
            </div>
            <el-tree ref="treeRef" show-checkbox :data="allMenus" :props="defaultProps" :default-checked-keys="selectMenus" node-key="id" :key="index"></el-tree>
            <div class="modifySourceBtns">
              <el-button size="mini" @click="cancelUpdate">取消修改</el-button>
              <el-button type="primary" size="mini" @click="doUpdate(item.id, index)">确认修改</el-button>
            </div>
          </el-card>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PermissMana',
  created() {
    this.initRoles()
    this.initAllMenus()
  },
  data() {
    return {
      role: {
        name: '', //英文名称
        nameZh: '', //中文名称
      },
      roles: [],
      activeName: -1,
      allMenus: [],
      selectMenus: [],
      //这里会去匹配到allMenus里面的children
      defaultProps: {
        children: 'children',
        label: 'name',
      },
    }
  },
  methods: {
    async initRoles() {
      const data = await this.getRequest('/system/basic/permiss/')
      if (data) {
        this.roles = data
      }
    },
    async doAddRole() {
      if (this.role.name != '' && this.role.nameZh != '') {
        const data = await this.postRequest('/system/basic/permiss/role', this.role)
        if (data) {
          this.initRoles()
        }
      }
    },
    collapseChange(rid) {
      if (rid) {
        this.selectMenuByRid(rid)
        this.initAllMenus()
      }
    },
    async initAllMenus() {
      const data = await this.getRequest('/system/basic/permiss/menus')
      console.log(data, 'h')
      if (data) {
        this.allMenus = data
        console.log(this.allMenus, 'allMenus')
      }
    },
    async selectMenuByRid(rid) {
      const data = await this.getRequest(`/system/basic/permiss/mid/${rid}`)
      console.log(data, '22')
      if (data) {
        this.selectMenus = data
        console.log(this.selectMenus, 'selectMenus')
      }
    },
    //取消修改可访问资源
    cancelUpdate() {
      this.activeName = -1
    },
    //更新可访问资源
    async doUpdate(rid, index) {
      // 获取当前访问到的tree组件引用
      let tree = this.$refs.treeRef[index]
      // 获取当前选中的key值 true代表只返回叶子节点的key
      let selectedKeys = tree.getCheckedKeys(true)
      let url = '/system/basic/permiss/?rid=' + rid
      selectedKeys.forEach((key) => {
        url += '&mids=' + key
      })
      const data = await this.putRequest(url)
      if (data) {
        this.selectMenuByRid(rid)
        this.activeName = -1
      }
    },
    deleteRole(item) {
      this.$confirm('此操作将删除 [' + item.nameZh + '] 角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.deleteRequest(`/system/basic/permiss/role/${item.id}`).then((data) => {
            if (data) {
              this.initRoles()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
}
</script>

<style lang="less" scoped>
.permissMana-header {
  display: flex;
  .el-input {
    width: 300px;
    margin-right: 6px;
  }
}

.permissMana-body {
  margin-top: 10px;
}

.modifySourceBtns {
  margin-top: 5px;
  display: flex;
  justify-content: flex-end;
}
</style>
